<script setup lang="ts">
import {ref, reactive, watch, computed} from 'vue'
import {ElMessage} from "element-plus";
import {User, Lock} from '@element-plus/icons-vue'
import type { WXLoginResponseData } from "@/api/type_hosp.ts";
import { reqWxLogin } from "@/api/hospital.ts";
import {useRoute, useRouter} from "vue-router";
import useUserStore from "@/store/modules/user.ts";

import CountDown from "@/components/CountDown.vue";

//获取路由器对象
let $router = useRouter();
let $route = useRoute();
let userStore = useUserStore();

//定义一个响应式数据控制倒计时组件显示与隐藏
let flag = ref<boolean>(false); //flag如果为真,开启倒计时  flag:为假的并非倒计时
let scene = ref<number>(0); //0代表收集号码登录  如果是1 微信扫码登录

let form = ref<any>();   //获取form组件实例

let loginParam = reactive({  //收集表单数据
    phone: "", //手机号码
    code: "", //验证码
});

let isPhone = computed(() => {
    const reg = /^1((34[0-8])|(8\d{2})|(([35][0-35-9]|4[579]|66|7[35678]|9[1389])\d{1}))\d{7}$/;
    return reg.test(loginParam.phone);   //返回布尔值
});

//点击微信扫码登录|微信小图标切换为微信扫码登录
const changeScene = async () => {
    //切换场景为1
    scene.value = 1;
    //发请求获取微信扫码二维码需要参数
    //咱们在想硅谷学校的服务器发请求,获取微信扫码登录页面参数
    //还需要携带一个参数:告诉学校服务器用户授权成功以后重定向项目某一个页面
    let redirect_URL = encodeURIComponent(window.location.origin + "/wxlogin");
    let result: WXLoginResponseData = await reqWxLogin(redirect_URL);
    //生成微信扫码登录二维码页面
    //@ts-ignore
    new WxLogin({
        self_redirect: true, //true:手机点击确认登录后可以在 iframe 内跳转到 redirect_uri
        id: "login_container", //显示二维码容器设置
        appid: result.data.appid, //应用位置标识appid
        scope: "snsapi_login", //当前微信扫码登录页面已经授权了
        redirect_uri: result.data.redirectUri, //填写授权回调域路径,就是用户授权成功以后，微信服务器向公司后台推送code地址
        state: result.data.state, //state就是学校服务器重定向的地址携带用户信息
        style: "black",
        href: "",
    });
};
//获取验证码按钮的回调
const getCode = async () => {
    //解决element-plus按钮禁用还能点击的问题
    if (!isPhone.value || flag.value) return;
    //开启倒计时模式,倒计时组件显示出来
    flag.value = true;
    //通知pinia仓库存储验证码
    try {
        //获取验证码成功
        await userStore.getCode(loginParam.phone);
        loginParam.code = userStore.code;
    } catch (error) {
        ElMessage({
            type: "error",
            message: (error as Error).message,
        });
    }
};

//计数器子组件绑定的自定义事件
//当倒计时为零的时候,通知父组件倒计时组件隐藏
const getFlag = (val: boolean) => {
    //倒计时模式结束
    flag.value = val;
};

//点击用户登录按钮回调
const login = async () => {
    //保证表单校验两项都复合条件
    await form.value.validate();
    //发起登录请求
    //登录请求成功:顶部组件需要展示用户名字、对话框关闭
    //登录请求失败:弹出对应登录失败的错误信息
    try {
        //用户登录成功
        await userStore.userLogin(loginParam);
        //关闭对话框
        userStore.visible = false;
        //获取url的query参数
        let redirect = $route.query.redirect;
        if (redirect) {
            await $router.push(redirect as string);
        } else {
            await $router.push('/home');
        }
    } catch (error) {
        ElMessage({
            type: "error",
            message: (error as Error).message,
        });
    }
};

//自定义校验规则:手机号码自定义校验规则
const validatorPhone = (rule: any, value: any, callBack: any) => {
    //rule:即为表单校验规则对象
    //value:即为当前文本的内容
    //callBack:回调函数
    const reg = /^1((34[0-8])|(8\d{2})|(([35][0-35-9]|4[579]|66|7[35678]|9[1389])\d{1}))\d{7}$/;
    if (reg.test(value)) {
        callBack();
    } else {
        callBack(new Error("请输入正确的手机号码格式"));
    }
};
//验证码自定义校验规则
const validatorCode = (rule: any, value: any, callBack: any) => {
    //rule:即为表单校验规则对象
    //value:即为当前文本的内容
    //callBack:回调函数
    if (/^\d{6}$/.test(value)) {
        callBack();
    } else {
        callBack(new Error("请输入正确的验证码格式"));
    }
};
//表单校验的规则对象
const rules = {
    //手机号码校验规则
    //required:代表当前字段务必进行校验
    //message:代表的校验错误的提示信息
    //trigger:代表表单校验触发的时机  change:文本发生变化的时候进行校验  blur:失却焦点的时候触发校验
    //min:代表的是最小位数
    //max:代表的是最大的位置
    // phone: [{ required: true, message: "手机号码务必11位", trigger: "change", min: 11 }],
    // code: [{ required: true, message: "验证码务必6位", trigger: "blur", min: 6 }],

    phone: [{trigger: "change", validator: validatorPhone}],
    code: [{trigger: "change", validator: validatorCode}],
};
//关闭窗口按钮的回调
const closeDialog = () => {
    userStore.visible = false;
};

//点击手机短信验证码盒子回调
const handler = () => {
    scene.value = 0;
};

//监听场景的数据
watch(
    () => scene.value,
    (val: number) => {
        if (val === 1) {
            userStore.queryState();
        }
    }
);
</script>

<template>
    <div class="login_container">
        <!-- title:对话框左上角的标题 v-model:控制对话框显示与隐藏 -->
        <el-dialog v-model="userStore.visible" title="用户登录" ref="dialog">
            <!-- 对话框身体部分解构 -->
            <el-row>
                <!-- 左侧解构:收集号码登录、微信扫一扫登录 -->
                <el-col :span="12">
                    <div class="login">
                        <div v-show="scene == 0">
                            <el-form :model="loginParam" :rules="rules" ref="form">
                                <el-form-item prop="phone">
                                    <el-input placeholder="请你输入手机号码"
                                              :prefix-icon="User" v-model="loginParam.phone">
                                    </el-input>
                                </el-form-item>
                                <el-form-item prop="code">
                                    <el-input placeholder="请输入手机验证码"
                                              :prefix-icon="Lock" v-model="loginParam.code">
                                    </el-input>
                                </el-form-item>
                                <el-form-item>
                                    <el-button :disabled="!isPhone || flag ? true : false">
                                        <CountDown v-if="flag" :flag="flag" @getFlag="getFlag"/>
                                        <span v-else @click="getCode">获取验证码</span>
                                    </el-button>
                                </el-form-item>
                            </el-form>
                            <el-button style="width: 100%"
                                       type="primary" size="default"
                                       :disabled="!isPhone || loginParam.code.length < 6 ? true : false"
                                       @click="login">
                                用户登录
                            </el-button>

                            <div class="bottom" @click="changeScene">
                                <p>微信扫码登录</p>
                                <svg t="1739539540983" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4387" width="30" height="30">
                                    <path
                                        d="M512.73678 968.402751c-246.990301 0-447.905216-200.953801-447.905216-447.911356 0-246.943228 200.914916-447.898053 447.905216-447.898053 246.947322 0 447.904193 200.953801 447.904193 447.898053C960.640973 767.449973 759.684102 968.402751 512.73678 968.402751zM512.73678 89.832981c-237.487879 0-430.665577 193.171558-430.665577 430.658414s193.177698 430.658414 430.665577 430.658414c237.4449 0 430.664553-193.171558 430.664553-430.658414S750.180658 89.832981 512.73678 89.832981zM615.259782 454.626291c7.009647 0 13.96199 0.534166 20.772093 1.310855-18.720364-87.122243-111.826901-151.754263-217.995943-151.754263-118.79357 0-216.116129 80.980359-216.116129 183.831842 0 59.268872 32.413224 108.029412 86.48063 145.877415l-21.598924 64.989153 75.53944-37.912471c26.998911 5.342682 48.654117 10.849092 75.696006 10.849092 6.752798 0 13.477966-0.314155 20.117177-0.854461-4.188392-14.46034-6.639211-29.570479-6.639211-45.25674C431.512874 531.268856 512.564865 454.626291 615.259782 454.626291zM499.101225 396.056338c16.213263 0 27.027563 10.671037 27.027563 26.948769 0 16.2061-10.813277 27.055193-27.027563 27.055193-16.22759 0-32.483832-10.849092-32.483832-27.055193C466.618417 406.727375 482.873636 396.056338 499.101225 396.056338zM347.824847 450.060299c-16.213263 0-32.598442-10.849092-32.598442-27.055193 0-16.276708 16.384156-26.948769 32.598442-26.948769 16.184611 0 26.912953 10.671037 26.912953 26.948769C374.7378 439.211207 364.009458 450.060299 347.824847 450.060299zM812.484655 623.100354c0-86.424348-86.424348-156.841118-183.504384-156.841118-102.850459 0-183.874821 70.416769-183.874821 156.841118 0 86.573751 81.023338 156.798139 183.874821 156.798139 21.512966 0 43.169195-5.385661 64.796772-10.813277l59.311851 32.483832-16.299221-54.011124C780.214694 715.015763 812.484655 671.818939 812.484655 623.100354zM569.33994 596.044138c-10.770298 0-21.626553-10.714016-21.626553-21.606087 0-10.79281 10.856255-21.609157 21.626553-21.609157 16.3422 0 27.04189 10.81737 27.04189 21.609157C596.381829 585.331145 585.68214 596.044138 569.33994 596.044138zM688.205141 596.044138c-10.685363 0-21.456684-10.714016-21.456684-21.606087 0-10.79281 10.770298-21.609157 21.456684-21.609157 16.22759 0 27.083845 10.81737 27.083845 21.609157C715.290009 585.331145 704.432731 596.044138 688.205141 596.044138z"
                                        fill="#1afa29" p-id="4388"></path>
                                </svg>
                            </div>
                        </div>
                        <div class="webchat" v-show="scene == 1">
                            <!-- 在这个容器当中显示微信扫码登录页面 -->
                            <div id="login_container"></div>
                            <div class="phone" @click="handler">
                                <p>手机短信验证码登录</p>
                                <svg t="1685676069573" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2476" width="16" height="16">
                                    <path
                                        d="M820.409449 797.228346q0 25.19685-10.07874 46.866142t-27.716535 38.299213-41.322835 26.204724-50.897638 9.574803l-357.795276 0q-27.212598 0-50.897638-9.574803t-41.322835-26.204724-27.716535-38.299213-10.07874-46.866142l0-675.275591q0-25.19685 10.07874-47.370079t27.716535-38.80315 41.322835-26.204724 50.897638-9.574803l357.795276 0q27.212598 0 50.897638 9.574803t41.322835 26.204724 27.716535 38.80315 10.07874 47.370079l0 675.275591zM738.771654 170.330709l-455.559055 0 0 577.511811 455.559055 0 0-577.511811zM510.992126 776.062992q-21.165354 0-36.787402 15.11811t-15.622047 37.291339q0 21.165354 15.622047 36.787402t36.787402 15.622047q22.173228 0 37.291339-15.622047t15.11811-36.787402q0-22.173228-15.11811-37.291339t-37.291339-15.11811zM591.622047 84.661417q0-8.062992-5.03937-12.598425t-11.086614-4.535433l-128 0q-5.03937 0-10.582677 4.535433t-5.543307 12.598425 5.03937 12.598425 11.086614 4.535433l128 0q6.047244 0 11.086614-4.535433t5.03937-12.598425z"
                                        p-id="2477"></path>
                                </svg>
                            </div>
                        </div>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div class="leftContent">
                        <div class="top">
                            <div class="item">
                                <img src="../assets/images/code_app.png" alt=""/>
                                <svg t="1685263287521" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2450" width="16" height="16">
                                    <path
                                        d="M337.387283 341.82659c-17.757225 0-35.514451 11.83815-35.514451 29.595375s17.757225 29.595376 35.514451 29.595376 29.595376-11.83815 29.595376-29.595376c0-18.49711-11.83815-29.595376-29.595376-29.595375zM577.849711 513.479769c-11.83815 0-22.936416 12.578035-22.936416 23.6763 0 12.578035 11.83815 23.676301 22.936416 23.676301 17.757225 0 29.595376-11.83815 29.595376-23.676301s-11.83815-23.676301-29.595376-23.6763zM501.641618 401.017341c17.757225 0 29.595376-12.578035 29.595376-29.595376 0-17.757225-11.83815-29.595376-29.595376-29.595375s-35.514451 11.83815-35.51445 29.595375 17.757225 29.595376 35.51445 29.595376zM706.589595 513.479769c-11.83815 0-22.936416 12.578035-22.936416 23.6763 0 12.578035 11.83815 23.676301 22.936416 23.676301 17.757225 0 29.595376-11.83815 29.595376-23.676301s-11.83815-23.676301-29.595376-23.6763z"
                                        fill="#cdcdcd" p-id="2451"></path>
                                    <path
                                        d="M510.520231 2.959538C228.624277 2.959538 0 231.583815 0 513.479769s228.624277 510.520231 510.520231 510.520231 510.520231-228.624277 510.520231-510.520231-228.624277-510.520231-510.520231-510.520231zM413.595376 644.439306c-29.595376 0-53.271676-5.919075-81.387284-12.578034l-81.387283 41.433526 22.936416-71.768786c-58.450867-41.433526-93.965318-95.445087-93.965317-159.815029 0-113.202312 105.803468-201.988439 233.803468-201.98844 114.682081 0 216.046243 71.028902 236.023121 166.473989-7.398844-0.739884-14.797688-1.479769-22.196532-1.479769-110.982659 1.479769-198.289017 85.086705-198.289017 188.67052 0 17.017341 2.959538 33.294798 7.398844 49.572255-7.398844 0.739884-15.537572 1.479769-22.936416 1.479768z m346.265896 82.867052l17.757225 59.190752-63.630058-35.514451c-22.936416 5.919075-46.612717 11.83815-70.289017 11.83815-111.722543 0-199.768786-76.947977-199.768786-172.393063-0.739884-94.705202 87.306358-171.653179 198.289017-171.65318 105.803468 0 199.028902 77.687861 199.028902 172.393064 0 53.271676-34.774566 100.624277-81.387283 136.138728z"
                                        fill="#cdcdcd" p-id="2452"></path>
                                </svg>
                                <p>微信扫一扫关注</p>
                                <p>“快速预约挂号”</p>
                            </div>
                            <div class="item">
                                <img src="../assets/images/code_login_wechat.png" alt=""/>
                                <svg t="1685263518283" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3668" width="16" height="16">
                                    <path
                                        d="M256 85.333333h512c64.8 0 117.333333 52.533333 117.333333 117.333334v618.666666c0 64.8-52.533333 117.333333-117.333333 117.333334H256c-64.8 0-117.333333-52.533333-117.333333-117.333334V202.666667c0-64.8 52.533333-117.333333 117.333333-117.333334z m0 64a53.333333 53.333333 0 0 0-53.333333 53.333334v618.666666a53.333333 53.333333 0 0 0 53.333333 53.333334h512a53.333333 53.333333 0 0 0 53.333333-53.333334V202.666667a53.333333 53.333333 0 0 0-53.333333-53.333334H256z m170.666667 618.666667a32 32 0 0 1 0-64h170.666666a32 32 0 0 1 0 64H426.666667z"
                                        fill="#000000" p-id="3669"></path>
                                </svg>
                                <p>扫一扫下载</p>
                                <p>“预约挂号”APP</p>
                            </div>
                        </div>
                    </div>
                    <p class="tip">尚医通官方指定平台</p>
                    <p class="tip">快速挂号 安全放心</p>
                </el-col>
            </el-row>
            <template #footer>
                <el-button type="primary" size="default" @click="closeDialog">关闭窗口</el-button>
            </template>
        </el-dialog>
    </div>
</template>

<style scoped lang="scss">
.login_container {
    ::v-deep(.el-dialog__body) {
        border-top: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
    }

    .login {
        padding: 20px;
        border: 1px solid #ccc;

        .webchat {
            display: flex;
            flex-direction: column;
            align-items: center;

            .phone {
                display: flex;
                flex-direction: column;
                align-items: center;

                p {
                    margin: 10px 0px;
                }
            }
        }
    }

    .bottom {
        display: flex;
        flex-direction: column;
        align-items: center;

        p {
            margin: 10px 0px;
        }
    }

    .leftContent {
        .top {
            display: flex;
            justify-content: space-around;

            .item {
                display: flex;
                flex-direction: column;
                align-items: center;

                img {
                    width: 130px;
                    height: 130px;
                }

                p {
                    margin: 5px 0px;
                }
            }
        }
    }

    .tip {
        text-align: center;
        margin: 20px 0px;
        font-size: 20px;
        font-weight: 900;
    }
}
</style>